
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>YOLOv8 Video Stream</title>
    <style>        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .header {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }
        .content {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px; /* 添加间距 */
        }
        .left, .right, .middle {
            flex: 1;
            padding: 20px;
            border: 1px solid #ccc;
            margin: 20px;
            text-align: center;
        }
        .video-container {
            width: 100%;
            max-width: 640px;
            margin: 0 auto;
        }
        .footer {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>YOLOv8 Video Stream</h1>
        <p id="labels">Detected Labels: None</p>
    </div>
    <div class="content">
        <div class="left">
            <h2>Left Panel</h2>
            <div class="display-box">
                <p>No file selected.</p>
            </div>
            <form id="left-form">
                <input type="file" id="file-input" />
                <button id="upload-btn">Upload</button>
                <div id="result"></div>
            </form>
        </div>
        <div class="middle">
            <div class="video-container">
                <img src="/video_feed" alt="Video Stream" id="video-stream" width="640" height="480">
                 <div id="objects"></div>
            </div>
        </div>
        <div class="right">
            <h2>Right Panel</h2>
            <div class="display-box">
                <p>No file selected.</p>
            </div>
            <form id="right-form">
                <input type="file" id="right-file-input" accept="image/*,video/*">
                <button type="submit">Submit</button>
            </form>
        </div>
    </div>
    <div class="footer">
        <p>Developed by Your Name</p>
    </div>

    <script>
        // Handle left form submission
        document.getElementById('left-form').addEventListener('submit', async (event) => {
            event.preventDefault();
            const fileInput = document.getElementById('left-file-input');
            const file = fileInput.files[0];
            if (file) {
                const displayBox = document.querySelector('.left .display-box');
                displayBox.innerHTML = '';

                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        displayBox.innerHTML = `<img src="${e.target.result}" alt="Selected File" style="max-width: 100%;">`;
                    };
                    reader.readAsDataURL(file);
                } else if (file.type.startsWith('video/')) {
                    const videoUrl = URL.createObjectURL(file);
                    displayBox.innerHTML = `<video controls src="${videoUrl}" width="100%" height="auto"></video>`;
                    await predictVideoStream(videoUrl); // 调用预测视频流接口
                }
            }
        });

        // Handle right form submission
        document.getElementById('right-form').addEventListener('submit', (event) => {
            event.preventDefault();
            const fileInput = document.getElementById('right-file-input');
            const file = fileInput.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const displayBox = document.querySelector('.right .display-box');
                    displayBox.innerHTML = `<img src="${e.target.result}" alt="Selected File" style="max-width: 100%;">`;
                };
                reader.readAsDataURL(file);
            }
        });

        document.getElementById('upload-btn').addEventListener('click', function() {
            const input = document.getElementById('file-input');
            const file = input.files[0];

            if (file) {
                const formData = new FormData();
                formData.append('file', file);

                fetch('/MP4_feed', {
                    method: 'POST',
                    body: formData
                }).then(response => response.json())
                  .then(data => {
                      document.getElementById('result').innerHTML = `<img src="${data.imageUrl}" alt="Processed Image">`;
                  })
                  .catch(error => console.error('Error:', error));
            }
        });

        //Predict video stream function
        async function predictVideoStream(videoUrl) {
            try {
                const response = await fetch('/predict_video_stream', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ videoUrl })
                });

                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }

                const data = await response.json();
                console.log('Prediction result:', data);

                // 更新检测到的标签
                document.getElementById('labels').textContent = `Detected Labels: ${data.labels.join(', ')}`;
            } catch (error) {
                console.error('Error predicting video stream:', error);
            }
        }
    </script>
</body>
</html>